<template>
	<view>
		<view :style="{height: (statusBarHeight) + 'px'}"></view>
		<view class="upper" :style="{height: (navigationBarHeight ) + 'px'}">
			<image class="iconImg" @click="GoBack()" src="https://img.wilmer.com.cn/admin/2024/3-25/Rectangle%2071.png"
				mode=""></image>
			<view class="conter_box">AI智能选校</view>
		</view>
		<!-- 问答记录 -->
		<scroll-view :style="{height: `${windowHeight}rpx`}" id="scrollview" scroll-y="true" :scroll-top="scrollTop"
			:scroll-with-animation="true" class="scroll-view">
			<view id="msglistview" class="matter" :style="{paddingBottom: (safeArea + 60) + 'px'}">
				<view class="box fade_in" :class="{'greenBox':item.state == 2}" v-for="(item,index) in list"
					v-if="!item.Show" :key="index">
					{{item.name}}
					<br>
					<text v-if='item.name == "平均成绩？"' style="font-size: 28rpx;color:#666666">各科成绩的平均值</text>
				</view>
			</view>
		</scroll-view>
		<!-- 问答区域 -->
		<view class="Qs" :style="{bottom: safeArea + 'px'}" :class="{'fade_out':fadeState,'fade_bottom_in':!fadeState}">
			<!-- 单选 -->
			<view class="qs_nav" v-for="(item,index) in qsList" :key="index" @click="onclick(item)"
				v-if="Serial_Number <= 5 && !inputState">
				{{item.label}}
			</view>
			<!-- 文本 -->
			<view class="Qs_version" v-if="Serial_Number >= 5 && inputState">
				<u-input placeholder="请输入内容" border="surround" v-model="achievement" :type='ExamType == "雅思"
						? "digit" :"number"' @input="bindTextAreaBlur()" bgColor='#fff'>
					<template slot="suffix">
						<u-button @tap="TextAreaBlur" text="确定" type="success" size="mini"></u-button>
					</template>
				</u-input>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				scrollTop: 0, // 滚动距离
				statusBarHeight: 0, // 状态栏高度
				navigationBarHeight: 44, // 导航栏高度
				safeArea: 0, // 底部安全距离

				Serial_Number: 0,
				fadeState: false, // 问答淡出动画
				achievement: "", // 成绩
				dataType: true, // true：整数  false：浮点数
				ExamType: '', // 用户选中的考试类型
				inputState: false,
				list: [{
					state: '1', // 1 问题 2用户回答
					name: "留学目的地？",
				}], // 渲染对话数据
				qsList: [{
					value: "英国",
					label: "英国"
				}, {
					value: "澳大利亚",
					label: "澳大利亚"
				}, {
					value: "新西兰",
					label: "新西兰"
				}, {
					value: "美国",
					label: "美国"
				}, {
					value: "中国香港",
					label: "中国香港"
				}, {
					value: "新加坡",
					label: "新加坡"
				}, {
					value: "加拿大",
					label: "加拿大"
				}, {
					value: "马来西亚",
					label: "马来西亚"
				}, {
					value: "中国澳门",
					label: "中国澳门"
				}, {
					value: "爱尔兰",
					label: "爱尔兰"
				}],
				timeState: false
			}
		},
		onShow() {
			// 获取顶部安全距离
			const systemInfo = uni.getSystemInfoSync();
			this.statusBarHeight = systemInfo.statusBarHeight || 0;
			// 获取底部安全距离
			let res = uni.getSystemInfoSync();
			this.safeArea = res.screenHeight - res.safeArea.bottom;
		},
		computed: {
			windowHeight() {
				return this.rpxTopx(uni.getSystemInfoSync().windowHeight) - 250
			}
		},
		methods: {
			// 滚动至聊天底部
			scrollToBottom(e) {
				setTimeout(() => {
					let query = uni.createSelectorQuery().in(this);
					query.select('#scrollview').boundingClientRect();
					query.select('#msglistview').boundingClientRect();
					query.exec((res) => {
						if (res[1].height > res[0].height) {
							this.scrollTop = this.rpxTopx(res[1].height - res[0].height)
						}
					})
				}, 2000)
			},
			// px转换成rpx
			rpxTopx(px) {
				let deviceWidth = wx.getSystemInfoSync().windowWidth
				let rpx = (750 / deviceWidth) * Number(px)
				return Math.floor(rpx)
			},
			GoBack() {
				uni.switchTab({
					url: '/pages/school/index'
				})
			},
			onclick(item) {
				// 判断是否已经点击过
				if (this.timeState) {
					return
				}
				this.timeState = true

				let that = this
				this.Serial_Number += 1
				this.list.push({
					state: '2',
					name: item.value,
				})
				this.fadeState = true
				setTimeout(() => {
					this.fadeState = false
				}, 2000)
				setTimeout(() => {
					if (this.Serial_Number == 1) {
						this.list.push({
							state: '1',
							name: '目标学历？',
						})
						this.qsList = [{
							value: "本科",
							label: "本科"
						}, {
							value: "研究生",
							label: "研究生"
						}]
					} else if (this.Serial_Number == 2) {
						this.list.push({
							state: '1',
							name: '意向专业？',
						})
						this.qsList = [{
							value: "IT",
							label: "IT"
						}, {
							value: "商科",
							label: "商科"
						}, {
							value: "传媒",
							label: "传媒"
						}, {
							value: "法学",
							label: "法学"
						}, {
							value: "教育",
							label: "教育"
						}, {
							value: "其他",
							label: "其他"
						}]
					} else if (this.Serial_Number == 3) {
						this.list.push({
							state: '1',
							name: '出国时间？',
						})
						this.qsList = [{
							value: "今年",
							label: "今年"
						}, {
							value: "明年",
							label: "明年"
						}, {
							value: "两年后",
							label: "两年后"
						}]
					} else if (this.Serial_Number == 4) {
						this.list.push({
							state: '1',
							name: '雅思成绩或托福成绩？',
						})
						this.qsList = [{
							value: "雅思",
							label: "雅思"
						}, {
							value: "托福",
							label: "托福"
						}, {
							value: "PTE",
							label: "PTE"
						}, {
							value: "都没有",
							label: "都没有"
						}]
					} else if (this.Serial_Number == 5) {
						let temporarily = this.list[this.list.length - 1]
						this.ExamType = temporarily.name

						if (this.ExamType == '都没有') {
							this.list.push({
								state: '1',
								name: '雅思',
								Show: true
							}, {
								state: '2',
								name: '7.5',
								Show: true
							}, {
								state: '1',
								name: '平均成绩？',
							})
							that.Serial_Number += 1
							setTimeout(() => {
								that.inputState = true
							}, 1000)
							return
						}

						setTimeout(() => {
							that.inputState = true
						}, 1000)
						this.list.push({
							state: '1',
							name: `${temporarily.name}成绩?`,
						})
					}
				}, 1000)
				this.scrollToBottom()
				setTimeout(() => {
					that.timeState = false
				}, 2000)
			},
			bindTextAreaBlur() {
				this.$nextTick(() => {
					// 雅思最大8分 托福最大120
					if (this.Serial_Number == 5 && Number(this.achievement) > 10 && this.ExamType == '雅思') {
						uni.showToast({
							title: '雅思最高分数为10分 ',
							icon: 'none'
						})
						this.achievement = ''
						setTimeout(() => {
							this.$forceUpdate()
						}, 200)
					} else if (this.Serial_Number == 5 && Number(this.achievement) > 120 && this.ExamType ==
						'托福') {
						uni.showToast({
							title: '托福最高分数为120分 ',
							icon: 'none'
						})
						this.achievement = ''
						setTimeout(() => {
							this.$forceUpdate()
						}, 200)
					} else if (this.Serial_Number == 5 && Number(this.achievement) > 90 && this.ExamType ==
						'PTE') {
						uni.showToast({
							title: 'PTE最高分数为90分 ',
							icon: 'none'
						})
						this.achievement = ''
						setTimeout(() => {
							this.$forceUpdate()
						}, 200)
					}
				})
			},
			TextAreaBlur() {
				if (this.achievement != '') {
					this.scrollToBottom()
					if (this.Serial_Number == 5) {
						console.log(this.list)
						this.list.push({
							state: '2',
							name: this.achievement,
						})
						// 清空值
						this.inputState = false
						setTimeout(() => {
							this.achievement = ''
							this.inputState = true
						}, 1000)
						// 下个问题平均成绩
						this.list.push({
							state: '1',
							name: '平均成绩？',
						})
						this.dataType = true
						this.Serial_Number += 1
					} else if (this.Serial_Number == 6 && this.achievement != '') {
						let arr = []
						for (let i = 0; i < this.list.length; i++) {
							let item = this.list[i]
							if (item.state == '2') {
								arr.push(item)
							}
						}
						let country = arr[0].name // 国家
						let degree = arr[1].name // 学位
						let major = arr[2].name // 意向学位
						let use_time = '' // 意向出国时间
						let tf = ''
						let ys = ''
						if (arr[3].name == '今年') {
							use_time = '1'
						} else if (arr[3].name == '明年') {
							use_time = '2'
						} else {
							use_time = '3'
						}
						if (arr[4].name == "托福") {
							tf = arr[5].name
						} else if (arr[4].name == "PTE") {
							ys = this.PTEtoIELTS(arr[5].name)
						} else {
							ys = arr[5].name
						}

						let avg = this.achievement // 平均成绩
						uni.navigateTo({
							url: `/pages/customer/payment?country=${country}&degree=${degree}&major=${major}&use_time=${use_time}&avg=${avg}&ys=${ys}&tf=${tf}`
						})
					}
				}
			},
			PTEtoIELTS(val) {
				if (val <= 30) {
					return 4.5
				} else if (val <= 36 && val > 30) {
					return 5
				} else if (val <= 42 && val > 36) {
					return 5.5
				} else if (val <= 50 && val > 42) {
					return 6
				} else if (val <= 58 && val > 50) {
					return 6.5
				} else if (val <= 65 && val > 58) {
					return 7
				} else if (val <= 73 && val > 65) {
					return 7.5
				} else if (val <= 79 && val > 73) {
					return 8
				} else if (val <= 83 && val > 79) {
					return 8.5
				} else if (val >= 86) {
					return 9
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.upper {
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;

		.conter_box {
			font-family: Branding-BoldItalic;
			font-size: 40rpx;
			font-weight: 500;
			color: #333333;
		}

		.iconImg {
			width: 28rpx;
			height: 40rpx;
			position: absolute;
			left: 28rpx;
		}
	}

	.matter {
		width: calc(100% - 64rpx);
		margin: 30rpx auto 0;
		display: flex;
		flex-direction: column;

		.box {
			width: fit-content;
			font-family: Branding-BoldItalic;
			font-size: 32rpx;
			font-weight: 600;
			line-height: 36rpx;
			color: #333333;
			padding: 38rpx 56rpx;
			background: #f8f8f8;
			border-radius: 0 20rpx 20rpx 20rpx;
			margin-top: 20rpx;
		}

		.greenBox {
			margin-left: auto;
			background: #F1DD96;
			border-radius: 20rpx 20rpx 0 20rpx;
		}
	}

	.Qs {
		width: calc(100% - 64rpx);
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
		position: fixed;
		left: 32rpx;

		.qs_nav {
			width: 332rpx;
			height: 106rpx;
			font-family: Branding-BoldItalic;
			font-size: 28rpx;
			font-weight: 500;
			color: #333333;
			text-align: center;
			line-height: 106rpx;
			background: #FFFAE7;
			margin-top: 20rpx;
		}

		.Qs_version {
			width: 100%;
			height: 106rpx;
			padding-bottom: 20rpx;
			display: flex;
			align-items: center;
			background: #FFF;
		}
	}

	// 淡出动画
	.fade_out {
		animation: backOutDown;
		animation-duration: 2s; // 时间
		animation-iteration-count: 1; // 此行次数
	}

	// 淡入动画__问答内容
	.fade_in {
		animation: backInUp;
		animation-duration: 2s; // 时间
		animation-iteration-count: 1; // 此行次数
	}

	.fade_bottom_in {
		animation: backInUp;
		animation-duration: 1s; // 时间
		animation-iteration-count: 1; // 此行次数
	}
</style>